'use strict'
import { View, ListView } from '../../component/index'
import globalStyle from '../css.css'
import style from './css.css'
import Descriptor from '../descriptor'
import Item from './Item'
import listDemoFetch from '../../config/listDemoFetch'

class ListViewRefresh extends React.Component {
  constructor (props) {
    super(props)
    this.state = {
      dataSource: []
    }
  }

  componentDidMount () {
    this._fetchData()
  }

  async _fetchData (cb) {
    const res = await listDemoFetch()
    if (res.success) {
      this.setState({
        dataSource: res.data
      })
    }
    cb && cb()
  }

  render () {
    return (
      <View className={globalStyle.example}>
        <ListView
          Item={Item}
          dataSource={this.state.dataSource}
          itemKey="id"
          topRefresh={(cb) => { this._fetchData(cb) }}
          className={style.verticalScrollView}>
        </ListView>
        <Descriptor
          title="下拉刷新"
        >
        通过设置`topRefresh`属性可实现下拉刷新。
        </Descriptor>
      </View>
    )
  }
}
export default ListViewRefresh
